<template>
  <div class="records_container">
    <div>
      <van-nav-bar :fixed="true" title="Loan Account" @click-left="onClickLeft">
        <template #left>
          <van-icon :name="arrow" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- Card -->
    <div class="account">
      <div class="title">You borrow</div>
      <div class="money">{{ '$0.00' }}</div>
      <!-- ETH Today's Profit-->
      <div class="introduce">
        <span class="trends">Loan Limit:</span>
        <span class="trends">$1000 ~ $10000000</span>
      </div>
      <!-- Center Card -->
      <div class="range">
        <div class="right_font">
          <div class="divider"></div>
          <div class="question"> Verify your identity! </div>
          <div class="info">Verification & get more loan amount</div>
        </div>
        <div class="next" @click="handleRouter">
          <span>Start</span>
        </div>
      </div>
    </div>
    <!-- Amount -->
    <div class="amount">
      <span class="title">Amount</span>
      <van-cell-group inset>
        <van-field v-model="amount" :right-icon="USDC" placeholder="I want to borrow" />
      </van-cell-group>
    </div>
    <!-- Loan term (Days) -->
    <div class="term">
      <span class="title">Loan term (Days)</span>
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item v-model="days" :options="daysList" />
      </van-dropdown-menu>
    </div>
    <!-- performce -->
    <div class="performce">
      <div>
        <span>Daily interest rate</span>
        <span style="color:#000">{{ '0.10%' }}</span>
      </div>
      <div>
        <span>Total interest amount</span>
        <span style="color:#000">{{ '0.00 US' }}</span>
      </div>
    </div>
    <!-- info -->
    <div class="info">
      <span>No interest need to pay within 3days days of the loan, after that, interest is payable.</span>
    </div>
    <!-- Button -->
    <div class="Borrow">
      <van-button type="primary">Borrow now</van-button>
    </div>
  </div>
</template>

<script setup name='Records'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import arrow from '@/assets/images/user/arrow.png'
import USDC from '@/assets/images/user/USDC.png'
import { userStore } from '@/store'
// 初始化仓库
const store = userStore()

// 变量区
const router = useRouter()
const route = useRoute()
// 下拉参数
const days = ref(0)
const daysList = ref([
  {
    text: '7Days',
    value: 0
  },
  {
    text: '10Days',
    value: 1
  },
  {
    text: '15Days',
    value: 2
  }
])
// amount
const amount = ref('')
// tab选中参数
const active = ref(0)
// tab数据
const tabList = ref([
  {
    label: 'Account',
    value: 0
  },
  {
    label: 'Interest-bearing',
    value: 1
  },
  {
    label: 'POS Staking',
    value: 2
  }
])


// 代码区
const onClickLeft = () => {
  history.back()
  store.SET_PATH_DATA('yes')
}
const onClickTab = ({ name }) => {
  active.value = name

}
onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.records_container {
  position: relative;
  padding: 100px 20px 20px;

  .account {
    width: 100%;
    height: 448px;
    background: url('../../../assets/images/earn/earnAccount.png') no-repeat;
    background-size: 100%;
    font-size: 25px;
    color: #fff;
    padding-top: 40px;
    padding-left: 30px;

    .money {
      font-size: 42px;
      font-weight: 700;
      margin-top: 20px;
      margin-bottom: 20px;
    }


    .range {
      display: flex;
      width: 90%;
      background: #fff;
      height: 160px;
      border-radius: 20px;
      margin-left: 50%;
      margin-top: 80px;
      transform: translateX(-52%);

      .right_font {
        padding: 40px 20px 20px 20px;
        color: #000;

        .question {
          font-weight: normal;
          font-size: 26px;
          margin-bottom: 10px;
        }

        .info {
          font-size: 25px;
          color: #999;
        }
      }

      .next {
        position: absolute;
        top: 50px;
        right: 30px;
        width: 96px;
        height: 56px;
        line-height: 50px;
        background: #82A8F9;
        border-radius: 40px;
        text-align: center;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .amount,
  .term {
    margin-top: 60px;

    .title {
      font-size: 25px;
      color: #AEAEAE;
      margin-left: 5px;
    }

    .van-cell-group--inset {
      margin: 0px;
    }

    ::v-deep .van-icon__image {
      display: block;
      width: 2em;
      height: 1em;
      object-fit: contain;
    }
  }

  .term {
    margin-top: 20px;

    ::v-deep .van-dropdown-menu__bar {
      border-radius: var(--van-cell-group-inset-radius);
    }

    ::v-deep .van-dropdown-menu__title:after {
      border-color: transparent transparent #000000 #000000;
      right: -4rem;
    }


    :deep .van-dropdown-menu__bar {
      border-radius: 10px;
    }

    :deep .van-dropdown-menu__title:after {
      right: -70px;
      border-color: transparent transparent #000000 #000000;
    }

    :deep .van-dropdown-item {
      margin: auto;
      width: 93%;

    }
  }

  .performce {
    font-size: 25px;
    color: #AEAEAE;

    div {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      padding-bottom: 30px;
      border-bottom: 1px solid #e4e2e2;
    }

  }

  .info {
    font-size: 28px;
    color: #575050;
    margin-top: 30px;
  }

  .Borrow {
    margin-top: 30px;

    :deep .van-button--normal {
      width: 100%;
      border-radius: 30px;
      height: 60px;
      background: #82A8F9;
    }
  }
}

.van-cell {
  height: 50px;
  line-height: 30px !important;
}
</style>